<template>
  <page-loading :show="pageLoading">
    <view class="quality-test-container">
      <car-info-header :carInfo="carInfo"></car-info-header>
      <view class="service"> 服务类型：{{ orderService }} </view>
      <view class="form-box">
        <view class="item-box">
          <view class="color-666 font-30">检查所拆装部件安装是否正确牢固</view>

          <!-- 单选是、否 -->
          <view class="radio-box">
            <label
              class="tag-box"
              :class="radioIndex === 0 ? 'is-active' : ''"
              @click="radioChange(0)"
            >
              <i-icon
                icon="iconbiaoqing2_1"
                size="38rpx"
                :color="radioIndex === 0 ? '#FBB000' : '#999'"
              ></i-icon>
              <text>否</text>
            </label>
            <label
              class="tag-box"
              :class="radioIndex === 1 ? 'is-active' : ''"
              @click="radioChange(1)"
            >
              <i-icon
                icon="iconbiaoqing"
                size="38rpx"
                :color="radioIndex === 1 ? '#FBB000' : '#999'"
              ></i-icon>
              <text>是</text>
            </label>
          </view>
        </view>

        <!-- 上传图片 -->
        <view class="item-box">
          <text class="title color-666 font-30">质检照片</text>

          <view class="img-list">
            <view v-if="imgArr.length" class="flex flex-wrap-w">
              <view
                v-for="(errImg, index) in imgArr"
                class="up-item"
                @click="showImg(index)"
                :key="index"
              >
                <image :src="errImg" mode="aspectFit" class="img"></image>
              </view>
              <view
                v-show="imgArr.length < 5 && showBtn"
                class="up-item btn-upload"
                @click="selectImg(0)"
              >
                <i-icon icon="iconxiangji" size="50rpx" color="#999"></i-icon>
              </view>
            </view>
            <view
              v-else-if="showBtn"
              class="up-item btn-upload"
              @click="selectImg(0)"
            >
              <i-icon icon="iconxiangji" size="50rpx" color="#999"></i-icon>
            </view>
          </view>
        </view>

        <!-- 已关联订单的异常 -->
        <view class="center-item" v-show="orderException.length">
          <view class="title flex flex-ai-c">
            <view class="title-text flex-1 color-666 font-30"
              >已关联异常修复</view
            >
            <view @click="showMore(0)">
              <text class="font-24 color-999 pr-10">{{
                orderShow ? '收起' : '展开'
              }}</text>
              <u-icon
                :name="orderShow ? 'arrow-up' : 'arrow-down'"
                color="#999"
                size="24rpx"
              ></u-icon>
            </view>
          </view>
          <view v-show="orderShow">
            <view v-for="(item, i) in orderException" :key="i">
              <view>
                <view class="status-abnormal">
                  <view class="item-title flex flex-ai-c">
                    <view class="flex-1">
                      <text class="item-name pr-10">
                        {{ item.exceptionName }}
                      </text>
                      <i-icon
                        icon="icontishi"
                        type="single"
                        size="30rpx"
                        color="#EB5C02"
                      ></i-icon>
                    </view>
                    <view
                      class="status-right color-999"
                      v-if="!showBtn && !item.repairUrl"
                    >
                      未修复
                    </view>
                    <view class="status-right color-EB5C02" v-else>
                      需要修复
                    </view>
                    <view
                      @click="gotoOrder(item.orderId)"
                      class="flex flex-ai-c"
                    >
                      <text class="status-right status-order">已关联订单</text>
                      <u-icon
                        name="arrow-right"
                        color="#999999"
                        size="24"
                      ></u-icon>
                    </view>
                  </view>
                  <view class="flex flex-ai-c">
                    <view style="width: 50%">
                      <text class="item-tips">{{
                        item.exceptionMsg || '异常照片'
                      }}</text>
                      <view class="item-img">
                        <image
                          class="img"
                          :src="item.imgs[0]"
                          mode="scaleToFill"
                        />
                        <view class="img-tips">{{ item.exceptionName }}</view>
                      </view>
                    </view>
                    <view v-if="item.repairUrl" @click="showRepair(i)">
                      <text class="item-tips2">已修复照片</text>
                      <view class="item-img">
                        <image
                          class="img"
                          :src="item.repairUrl"
                          mode="scaleToFill"
                        />
                        <view class="img-tips">{{ item.exceptionName }}</view>
                      </view>
                    </view>
                    <view v-else-if="showBtn" @click="selectImg(1, i)">
                      <text class="item-tips3">请上传修复照片</text>
                      <view class="up-img">
                        <i-icon
                          class="up-icon"
                          icon="iconxiangji"
                          size="54rpx"
                          color="#999"
                        ></i-icon>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 未关联订单的异常 -->

        <view class="center-item" v-show="noOrderException.length">
          <view class="title flex flex-ai-c">
            <view class="title-text flex-1 color-666 font-30"
              >未关联异常修复</view
            >
            <view @click="showMore(1)">
              <text class="font-24 color-999 pr-10">{{
                noOrderShow ? '展开' : '收起'
              }}</text>
              <u-icon
                :name="noOrderShow ? 'arrow-down' : 'arrow-up'"
                color="#999"
                size="24rpx"
              ></u-icon>
            </view>
          </view>
          <view v-show="noOrderShow">
            <view v-for="(item, i) in noOrderException" :key="i">
              <view>
                <view class="status-abnormal">
                  <view class="item-title flex flex-ai-c">
                    <view class="flex-1">
                      <text class="item-name pr-10">
                        {{ item.exceptionName }}
                      </text>
                      <i-icon
                        icon="icontishi"
                        type="single"
                        size="30rpx"
                        color="#EB5C02"
                      ></i-icon>
                    </view>
                    <view class="status-right color-EB5C02"> 需要修复 </view>
                    <view
                      v-if="showBtn"
                      class="status-right status-noorder"
                      @click="selOrder(item)"
                    >
                      创建关联订单
                    </view>
                    <view v-else class="status-right"> 未关联订单 </view>
                  </view>
                  <view class="flex flex-ai-c">
                    <view style="width: 50%">
                      <text class="item-tips">{{
                        item.exceptionMsg || '异常照片'
                      }}</text>
                      <view class="item-img">
                        <image
                          class="img"
                          :src="item.imgs[0]"
                          mode="scaleToFill"
                        />
                        <view class="img-tips">{{ item.exceptionName }}</view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 签字 -->
        <view class="item-box flex flex-jc-sb flex-ai-c">
          <view class="color-666 font-30">技师签字</view>

          <view class="value" @click="goSignaturePage()">
            <text class="font-30" :class="nameImg ? 'color-333' : 'color-999'">
              {{ nameImg ? '已签字确认' : '请签字确认' }}
            </text>
            <u-icon name="arrow-right" size="26rpx" color="#999"></u-icon>
          </view>
        </view>

        <!-- ps , tips -->
        <view class="tips">
          <text class="color-EB5C02 font-24"
            >*请务必对维修/拆装过的零部件及关联附件进行质量检测</text
          >
        </view>

        <!-- 按钮 -->
        <view class="btn-box" @click="next" v-show="showBtn">
          <button
            v-show="showBtn"
            class="btn-bg-yellow btn"
            :class="isBtnGary ? 'btn-gray' : ''"
          >
            提交质检报告
          </button>
        </view>
      </view>

      <!-- 预览图片 -->
      <preview-image
        :imgs="previewImgArr"
        :index="currentIndex"
        :preview.sync="showPreviewImg"
        :showDel="showBtn"
        :showReplace="showRepalce"
        @replaceImg="replaceImg"
        @upImgs="delImg"
      ></preview-image>

      <!-- 弹框提示 -->
      <u-popup v-model="popupShow" mode="center" border-radius="20" width="540">
        <view class="popup-content">
          <view class="title">温馨提示</view>
          <view class="content"
            >请完成{{ popupText }}后提交质检，如您继续提交，{{
              popupText
            }}记录将会清空，请确认是否提交</view
          >
          <view class="btn-box flex">
            <button class="btn-left" @click="popupCancel">去完成</button>
            <button class="btn-right" @click="popupConfirme">继续提交</button>
          </view>
        </view>
      </u-popup>
    </view></page-loading
  >
</template>

<script>
import carInfoHeader from '@/components/afterSales/carInfoHeader.vue'
import previewImage from '@/components/i-preview-image'

export default {
  data() {
    return {
      imgArr: [],
      radioIndex: 1, // 单选
      nameImg: '', // 签字图片
      id: '',
      showBtn: true,
      currentIndex: 0, //图片预览当前页
      showPreviewImg: false,
      showRepalce: false, //预览组件替换按钮显示
      previewImgArr: [], //预览图片
      showRepairIndex: 0, //修复图片预览的索引
      orderException: [], //已关联订单的异常列表
      orderExceptionNew: [], //已关联订单的异常列表-刷新
      noOrderException: [], //未关联订单的异常列表
      noOrderExceptionNew: [], //未关联订单的异常列表-刷新
      orderShow: true,
      noOrderShow: true,
      isNeedPopup: false, //是否需要显示弹窗
      popupText: '', //弹窗提示内容
      popupShow: false, //弹窗显示
      pageLoading: false, //初始化加载效果
    }
  },

  computed: {
    carInfo() {
      return this.$store.state.afterSales.carInfo
    },

    orderService() {
      return this.$store.state.afterSales.orderService
    },

    // 提交按钮为灰色
    isBtnGary() {
      let show = false
      // 如果必填项里有空项，则显示灰色提交按钮
      Object.values({
        errImg: this.imgArr,
        nameImg: this.nameImg,
      }).map((v) => {
        if (!v) {
          show = true
        }
      })

      return show
    },
  },

  onLoad(e) {
    this.id = e.id
    uni.$on('userConfirm', (data) => {
      this.nameImg = data.userName
    })
    uni.$on('selOrderSuccess', () => {
      uni.pageScrollTo({
        scrollTop: 0,
      })
      this.getAbnormalList(1)
    })
    this.getInfo()
    this.getAbnormalList(0)
    this.getDetectionState()
    this.$nextTick(() => {
      this.pageLoading = true
    })
  },
  onShow() {},

  methods: {
    //获取质检信息
    getInfo() {
      this.$api.afterSales
        .getQualityInspection({
          qualityInspectionId: this.id,
        })
        .then((res) => {
          if (res.data.technician_signature_url) {
            this.nameImg = res.data.technician_signature_url
            this.radioIndex = res.data.installation
            this.showBtn = false
          }
          this.imgArr = res.data.inspection_Urls
        })
        .catch((e) => {
          console.log(e)
        })
    },

    //获取异常列表
    getAbnormalList(type) {
      this.$api.afterSales
        .getAbnormalList({
          arriveId: this.id,
        })
        .then((res) => {
          if (type) {
            //关联订单后返回
            this.noOrderExceptionNew = res.data.noOrderException
            this.orderExceptionNew = res.data.orderException
            this.upDateList(0)
            this.upDateList(1)
          } else {
            //页面初始化
            this.noOrderException = res.data.noOrderException
            this.orderException = res.data.orderException
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },

    //刷新列表
    upDateList(type) {
      if (type) {
        //已关联订单列表
        for (let i = 0; i < this.orderExceptionNew.length; i++) {
          if (
            this.orderExceptionNew[i].exceptionId !==
            this.orderException[i].exceptionId
          ) {
            this.orderException.splice(i, 0, this.orderExceptionNew[i])
            break
          }
        }
      } else {
        //未关联订单列表
        for (let i = 0; i < this.noOrderException.length; i++) {
          if (
            this.noOrderExceptionNew[i].exceptionId !==
            this.noOrderException[i].exceptionId
          ) {
            this.noOrderException.splice(i, 1)
            break
          }
        }
      }
    },

    //检查进度
    getDetectionState() {
      this.$api.afterSales
        .getDetectionState({
          Order_Arrive_Store_Id: this.id,
        })
        .then((res) => {
          if (res.data.ptiStatus === 1) {
            this.popupText = '预检'
            this.isNeedPopup = true
          }
          if (res.data.inspectionStatus === 1) {
            if (this.isNeedPopup) {
              popupText = this.popupText + '、上检'
            } else {
              this.popupText = '上检'
              this.isNeedPopup = true
            }
          }
          if (res.data.workExcption === 1) {
            if (this.isNeedPopup) {
              this.popupText = this.popupText + '、施工异常'
            } else {
              this.popupText = '施工异常'
              this.isNeedPopup = true
            }
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },

    //订单详情
    gotoOrder(id) {
      uni.navigateTo({
        url: '/pages_afterSales/order/orderDetail/orderDetail?id=' + id,
      })
    },

    //展开收起
    showMore(type) {
      if (type) {
        this.noOrderShow = !this.noOrderShow
      } else {
        this.orderShow = !this.orderShow
      }
    },

    // 选择图片
    selectImg(type, index) {
      uni.showActionSheet({
        itemList: ['拍照', '打开相册'],
        success: (res) => {
          const cameraType = res.tapIndex ? 'album' : 'camera'
          uni.chooseImage({
            count: 1,
            sizeType: ['compressed'], //指定压缩图
            sourceType: [cameraType], // 从相册选择
            success: (res) => {
              // 上传图片
              uni.showLoading({
                title: '图片上传中~',
              })
              this.uploadImg({ filePath: res.tempFilePaths[0] }, type, index)
            },
          })
        },
      })
    },

    // 上传图片
    async uploadImg(data, type, index) {
      // 上传图片
      try {
        const res = await this.$api.files.uploadImg(data)
        let img = res.baseUrl + res.url
        if (type) {
          //上传异常图片
          this.orderException[index].repairUrl = img
        } else {
          //上传质检图片
          this.imgArr.push(img)
        }
      } catch (err) {
        console.log(err)
      }
      uni.hideLoading()
    },

    //预览图片
    showImg(i) {
      this.currentIndex = i
      this.showRepalce = false
      this.previewImgArr = this.imgArr
      this.showPreviewImg = true
    },

    //异常预览
    showRepair(i) {
      if (!this.showBtn) {
        return
      }
      this.currentIndex = 0
      this.showRepalce = this.showBtn
      this.showRepairIndex = i
      this.previewImgArr = [this.orderException[i].repairUrl]
      this.showPreviewImg = true
    },

    //替换修复图片
    replaceImg() {
      this.showPreviewImg = false
      this.selectImg(1, this.showRepairIndex)
    },

    //删除修复推按
    delImg() {
      if (this.showRepalce) {
        this.$set(this.orderException[this.currentIndex], 'repairUrl', '')
      }
    },

    // 单选
    radioChange(index) {
      if (!this.showBtn) {
        return
      }
      this.radioIndex = index
    },

    //跳转关联订单
    selOrder(data) {
      console.log(data)
      this.$store.commit('afterSales/setOrderErrList', [data])
      uni.navigateTo({
        url:
          '/pages_afterSales/selectOrder/selectOrder?id=' +
          this.id +
          '&exceptionId=' +
          data.exceptionId,
      })
    },

    // 跳转到签字页
    goSignaturePage() {
      if (!this.showBtn) {
        return
      }
      if (!this.imgArr.length) {
        uni.showToast({
          title: '请上传质检照片',
          icon: 'none',
        })
        return
      }
      this.$store.commit('afterSales/setSignData', {
        id: this.id,
        type: 2,
        figure: 0,
      })
      // 传入参数，签字页根据参数返回指定的页面
      let data = JSON.stringify({
        type: 'before',
        count: 1,
        fnName: 'qualitySign',
      })

      uni.navigateTo({
        url:
          '/pages_afterSales/signature/signature?title=技师交叉签字&typeOptions=' +
          data,
      })
    },

    //提交
    next() {
      if (this.isNeedPopup) {
        this.popupShow = true
      } else {
        this.submit()
      }
    },

    submit() {
      if (!this.showBtn) {
        return
      }
      let qualityTestingException = []
      for (let i = 0; i < this.orderException.length; i++) {
        if (this.orderException[i].repairUrl) {
          qualityTestingException.push({
            exceptionId: this.orderException[i].exceptionId,
            repairUrl: this.orderException[i].repairUrl,
          })
        }
      }
      if (!this.imgArr.length) {
        uni.showToast({
          title: '请提交质检照片',
          icon: 'none',
        })
        return
      }
      if (!this.nameImg) {
        uni.showToast({
          title: '请技师签字确认',
          icon: 'none',
        })
        return
      }
      this.$api.afterSales
        .addQualityInspection({
          technician_Signature_Url: this.nameImg,
          url: this.imgArr,
          installation: this.radioIndex,
          order_Arrive_Store_Id: this.id,
          qualityTestingException,
        })
        .then(() => {
          uni.showToast({
            title: '提交成功',
            duration: 2000,
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 2000)
        })
        .catch((e) => {
          console.log(e)
        })
    },

    popupCancel() {
      this.popupShow = false
    },

    popupConfirme() {
      this.popupShow = false
      this.submit()
    },
  },

  components: {
    previewImage,
    carInfoHeader,
  },
}
</script>

<style lang="scss" scoped>
.quality-test-container {
  min-height: 100vh;
  background-color: #f4f4f4;
}

.service {
  height: 70rpx;
  line-height: 70rpx;
  font-size: 24rpx;
  font-weight: 500;
  color: #666666;
  padding-left: 34rpx;
}

.form-box {
  padding: 0 20rpx 24rpx;

  .item-box {
    padding: 24rpx 20rpx;
    margin-bottom: 20rpx;
    background: #ffffff;
    border-radius: 10rpx;
  }

  // 单选
  .radio-box {
    margin-top: 40rpx;

    .tag-box {
      display: inline-block;
      padding: 12rpx 40rpx 12rpx 22rpx;
      margin-right: 50rpx;
      background: #f6f6f6;
      border: 1px solid #eeeeee;
      border-radius: 32rpx;

      .i-icon {
        vertical-align: middle;
      }

      text {
        margin-left: 24rpx;
        font-size: 28rpx;
        color: #333;
        vertical-align: middle;
      }
    }

    // 选中高亮
    .is-active {
      background: #fff8dc;
      border-color: #fbb000;

      text {
        color: #fbb000;
      }
    }
  }

  // 上传图片
  .img-list {
    .up-item {
      width: 120rpx;
      height: 90rpx;
      margin-top: 20rpx;
      margin-right: 12rpx;
      border: 1px solid #999999;
      border-radius: 10rpx;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    .btn-upload {
      line-height: 100rpx;
      text-align: center;
      border: 1px dashed #999999;
    }
  }

  .tips {
    margin-top: 20rpx;
  }

  .btn-box {
    margin: 250rpx auto 0;

    .btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      font-size: 30rpx;
      color: #333;
    }

    .btn-gray {
      background: #e1e1e1 !important;
    }
  }
}

.center-item {
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  background: #fff;

  .title {
    height: 88rpx;
    border-bottom: 2rpx solid #eee;

    .left-border {
      height: 30rpx;
      width: 8rpx;
      border-radius: 4rpx;
      background: #ffe23e;
      margin-right: 10rpx;
    }

    .title-text {
      font-weight: bold;
    }
  }

  .status-box {
    padding-top: 20rpx;

    .status {
      background: #f6f6f6;
      border-radius: 10rpx;
      padding: 0 20rpx;
      display: inline-block;

      .status-text {
        height: 50rpx;
        line-height: 50rpx;
        color: #999;
        padding-right: 20rpx;
        font-size: 28rpx;
        font-weight: bold;
        background: #f6f6f6;
      }
    }
  }

  .status-abnormal {
    border-bottom: 2rpx solid #eee;
    padding-bottom: 30rpx;

    .item-title {
      height: 74rpx;

      .item-name {
        padding-left: 22rpx;
        font-size: 26rpx;
        color: #333;
        font-weight: bold;
      }
    }

    .item-tips {
      display: inline-block;
      background: #fff7f7;
      color: #eb5c02;
      font-size: 24rpx;
      // height: 60rpx;
      // line-height: 60rpx;
      padding: 0 16rpx;
      border-radius: 10px;
      margin-bottom: 20rpx;
      // overflow: hidden;
    }

    .item-tips2 {
      display: inline-block;
      background: #f4fef8;
      color: #3db707;
      font-size: 24rpx;
      height: 60rpx;
      line-height: 60rpx;
      padding: 0 16rpx;
      border-radius: 10px;
      margin-bottom: 20rpx;
      overflow: hidden;
    }

    .item-tips3 {
      display: inline-block;
      background: #f6f6f6;
      color: #999999;
      font-size: 24rpx;
      height: 60rpx;
      line-height: 60rpx;
      padding: 0 20rpx;
      border-radius: 10px;
      margin-bottom: 20rpx;
    }

    .status-right {
      display: inline-block;
      font-size: 20rpx;
      transform: scale(0.87);
      color: #999999;
    }

    .status-noorder {
      line-height: 46rpx;
      height: 4r6px;
      background: #ffe23e;
      border-radius: 10rpx;
      color: #333;
      padding: 0 16rpx;
    }

    .color-EB5C02 {
      color: #eb5c02;
    }

    .up-img {
      position: relative;
      width: 266rpx;
      height: 200rpx;
      border: 3rpx dashed #999999;
      border-radius: 10rpx;
    }

    .up-icon {
      position: absolute;
      top: 73rpx;
      left: 106rpx;
    }

    .item-right {
      height: 17rpx;
      width: 142rpx;
    }

    .item-right2 {
      height: 46rpx;
      width: 150rpx;
    }

    .img-tongyi {
      width: 107rpx;
      height: 17rpx;
    }

    .item-img {
      position: relative;
      width: 266rpx;
      height: 200rpx;
      border-radius: 10rpx;
      background: #e1e1e1;

      .img {
        width: 266rpx;
        height: 200rpx;
        border-radius: 10rpx;
      }

      .img-tips {
        position: absolute;
        bottom: 0;
        width: 266rpx;
        height: 50rpx;
        line-height: 50rpx;
        background: rgba(0, 0, 0, 0.4);
        border-radius: 0px 0px 10rpx 10rpx;
        color: #fff;
        padding: 0 20rpx;
        font-size: 22rpx;
        font-weight: bold;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }

  .status-normal {
    height: 74rpx;
    padding-left: 22rpx;
    font-size: 26rpx;
    font-weight: bold;
    border-bottom: 2rpx solid #eee;
  }

  .fw-400 {
    font-weight: 400;
  }

  .pl-20 {
    padding-left: 20rpx;
  }

  .pr-10 {
    padding-right: 10rpx;
  }

  .pl-0 {
    padding-left: 0;
  }

  .font-20 {
    font-size: 20rpx;
  }

  .color-3DB707 {
    color: #3db707;
  }

  .color-EB5C02 {
    color: #eb5c02;
  }
}

// 提示弹框
.popup-content {
  padding: 30rpx 46rpx;
  text-align: center;

  .title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333333;
  }

  .content {
    padding: 46rpx 0;
    font-size: 28rpx;
    font-weight: 500;
    color: #666666;
  }

  .btn-box {
    .btn {
      height: 78rpx;
      font-size: 30rpx;
      color: #333;
    }

    .btn-left {
      width: 50%;
      border-radius: 39rpx 0 0 39rpx;
      height: 78rpx;
      font-size: 30rpx;
      background: #333;
      color: #ffe23e;
    }

    .btn-right {
      width: 50%;
      border-radius: 0 39rpx 39rpx 0;
      height: 78rpx;
      font-size: 30rpx;
      color: #333;
      background: linear-gradient(-90deg, #fdd421, #ffe23e);
    }
  }

  button {
    background: linear-gradient(-90deg, #fbd220, #ffe23e);
    border-radius: 44rpx;

    &::after {
      border: 0;
    }
  }
}
</style>
